<script setup lang="ts">
import TabBarItem from "./TabBarItem.vue";
</script>

<template>
  <div class="tab_bar">
    <tab-bar-item path="/home">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/home.png" alt="" />
      </template>
      <template v-slot:item-icon-active>
        <img src="~/assets/img/tabbar/home-a.png" alt="" />
      </template>
      <template v-slot:item-text><span>首页</span></template>
    </tab-bar-item>
    <tab-bar-item path="/category" activeColor="deepskyblue">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/category.png" alt="" />
      </template>
      <template v-slot:item-icon-active
        ><img src="~/assets/img/tabbar/category-a.png" alt=""
      /></template>
      <template v-slot:item-text> <span>分类</span> </template>
    </tab-bar-item>
    <tab-bar-item path="/cart" activeColor="darkseagreen">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/cart.png" alt="" />
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/cart-a.png" alt="" />
      </template>
      <template v-slot:item-text><span>蓝子</span></template>
    </tab-bar-item>
    <TabBarItem path="/profile" activeColor="deeppink">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/profile.png" alt="" />
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/profile-a.png" alt="" />
      </template>
      <template v-slot:item-text><span>我的</span></template>
    </TabBarItem>
  </div>
</template>

<style>
.tab_bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  background-color: #f6f6f6;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
  box-shadow: 0px 0px 1px 0px rgb(93 149 149);
}
</style>
